<template>
	<div class="staff">

		<!--顶部搜索栏-->
		<section class="head">
		</section>

		<!--侧边栏-->
		<aside-item :userid="userMessage.userid" :username="userMessage.username"></aside-item>

		<!--部门表格-->
		<el-table :data="depart_list" border style="width: 60%;font-size: 13px;margin-top: 60px;float: left;">
			<el-table-column label="请求表" align="center">
				<el-table-column label="部门id" prop="askid" align="center" v-if="showCol">
				</el-table-column>
				<el-table-column prop="userid" label="用户工号" align="center">
				</el-table-column>
				<el-table-column prop="username" label="用户名" align="center">
				</el-table-column>
				<el-table-column prop="askname" label="请求名称" align="center">
				</el-table-column>
				<el-table-column prop="askreason" label="请求原因" align="center">
				</el-table-column>
				<el-table-column prop="askstatus" label="请求状态" align="center" >
				</el-table-column>
				<el-table-column prop="startdate" label="开始日期" align="center" sortable>
				</el-table-column>
				<el-table-column prop="enddate" label="结束日期" align="center" sortable>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="departEdit(scope.row.askid)">审核</el-button>
						<!--<el-button type="danger" size="mini" @click="deleteDepart(scope.row.askid,scope.$index, scope.row)"></el-button>-->
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>

		<!--新增部门-->
		<el-dialog title="新增职位" :visible.sync="dialogFormVisible1" top="100px" width="1000px">
			<el-form>
				<el-form-item label="结果：">
						<el-select v-model="addForm.askstatus" placeholder="请选择">
						<el-option v-for="item in ask_type" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="理由：">
					<el-input v-model="addForm.resultreason">
					</el-input>
				</el-form-item>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="updateDepart()">确 定</el-button>
					<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>


		<div class="pagination">
			<el-pagination background @current-change="handleCurrentChange" :page-size="seachObj.pageSize" :current-page.sync="seachObj.page" layout="prev, pager, next, jumper,total" :total="totalNum">
			</el-pagination>
		</div>
	</div>

</template>

<script>
	import asideItem from "../../common/asideblock"
	import { mapState, mapMutations } from 'vuex';
	export default {
		name: 'staff',

		components: {
			asideItem
		},

		data() {
			return {
				depart_list: [],

				showCol: false,

				seachObj: {
					page: 1,
					pageSize: 5
				},

				ask_type: [{
					value: '0',
					label: '待沟通'
				},{
					value: '1',
					label: '批准'
				}, {
					value: '2',
					label: '拒绝'
				}, {
					value: '3',
					label: '面谈'
				}],
				
				addForm: {
					askname: '',
					askreason: '',
					askstatus: '',
					username:'',
					userid:'',
					startdate:'',
					enddate:'',
					askreason:'',
					operateman:'',
					resultreason:''
				},

				departInfo: {
					askname: '',
					askreason: '',
					type: ''
				},

				dialogFormVisible1: false,

				status: false,
				
				userMessage:{
					username:'',
					userid:''
				},
				totalNum: ''
			}
		},
		mounted() {
			this.getData();
			this.getLoginUser();
		},
		methods: {
			
			getLoginUser(){
				this.userMessage.username=decodeURI(this.$route.query.username);
				this.userMessage.userid=this.$route.query.userid;
			},
			
			getData() {
				var vm = this;
				vm.$http.post(this.API.FINDALLASK, JSON.stringify(vm.seachObj), this.API.HEADER).then((res) => {
					vm.depart_list = res.data.data.data;
					for(var i=0;i<vm.depart_list.length;i++){
						vm.depart_list[i].startdate=vm.dateFormat(vm.depart_list[i].startdate);
						vm.depart_list[i].enddate=vm.dateFormat(vm.depart_list[i].enddate);
						switch(vm.depart_list[i].askstatus){
							case 0:vm.depart_list[i].askstatus="待沟通";break;
							case 1:vm.depart_list[i].askstatus="批准";break;
							case 2:vm.depart_list[i].askstatus="拒绝";break;
							case 3:vm.depart_list[i].askstatus="面谈";break;
						}
					}
					
					vm.totalNum = res.data.total;
					vm.loading = false;
				})
			},

			updateDepart(id) {
				var vm = this;
				vm.addForm.operateman=decodeURI(this.$route.query.username);
				vm.$http.post(this.API.UPDATEASK, JSON.stringify(vm.addForm), this.API.HEADER).then((res) => {
						if(res.data.message == "success") {
							vm.$message({
								showClose: true,
								message: '修改成功'
							});
							vm.dialogFormVisible1 = false;
							vm.getData();
						}
					})
			},
			

			departDetail(id) {
				var vm = this;
				vm.dialogFormVisible1 = true;
				vm.$http.post(this.API.ASKDETAIL, JSON.stringify({
					askid: id
				}), this.API.HEADER).then((res) => {
					vm.addForm = res.data.data.data;
					vm.loading = false;
				})
				vm.status = true;
			},

			departEdit(id) {
				var vm = this;
				vm.departDetail(id);
				vm.status = false;
			},

			deleteDepart(id, index, row) {
				console.log(id, index, row);
				var vm = this;
				this.$confirm('确认删除？')
					.then(_ => {
						vm.$http.post(this.API.DELETEASK, JSON.stringify({
							askid:id
						}), this.API.HEADER).then((res) => {
							if(res.data.message == "success") {
								vm.$message({
									showClose: true,
									message: '刪除成功'
								});
								vm.getData();
							} else {
								vm.$message({
									showClose: true,
									message: '删除失败（可能是网络问题或缓存问题）'
								});
							}
						})
					})
			},

			handleCurrentChange(val) {
				var vm = this;
				vm.seachObj.page = val;
				vm.getData();
			},
			//日期格式化yy-mm-dd
			dateFormat(date) {
				var date=new Date(date);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				if(month < 10) {
					month = "0" + month;
				}
				if(day < 10) {
					day = "0" + day;
				}
				return year + '-' + month + '-' + day;
			},
			search() {
				var vm = this;
				vm.getData();
			}

		}
	}
</script>

<style lang="scss" scoped>
	#staff {
		width: 60%;
		margin: 50px auto;
		.el-table {
			width: 70%;
			margin-left: 5%;
			float: left;
		}
	}
	
	.head {
		margin: 0 auto;
		margin-top: 50px;
		padding-bottom: 20px;
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e6e6e6;
		.el-input {
			width: 20%;
			float: right;
			margin-left: 10px;
		}
		.el-data-picker {
			float: right;
		}
		.el-button {
			float: right;
			margin: 0 50px 0 10px;
		}
	}
	.el-table{
		border-radius: 10px;
		padding-bottom: 10px;
	}
	.el-dialog {
		.el-form {
			width: 80%;
			margin: 0 auto;
			.el-form-item {
				width: 100%;
				display: block;
				.el-input {
					width: 70%;
				}
				.el-select {
					width: 70%;
				}
			}
			/*上传图片样式*/
			.avatar-uploader .el-upload {
				width: 40%;
				float: left;
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}
			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}
			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}
			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}
		}
	}
	
	.pagination {
		width: 100%;
		height: 24px;
		margin: 5% 0;
		font-size: 12px;
		text-align: right;
		float: right;
	}
</style>